<template>
  <div class="navbar clearfix">
    <el-breadcrumb
      class="breadcrumb-container"
      separator-class="el-icon-arrow-right"
    >
      <el-breadcrumb-item
        v-for="item in levelList"
        :key="item.path"
        :to="item.path"
        >{{ item.meta.title }}</el-breadcrumb-item
      >
    </el-breadcrumb>
  </div>
</template>
<script>
export default {
  name: "Navbar",
  data() {
    return {
      levelList: []
    };
  },
  watch: {
    $route() {
      this.getBreadcrumb();
    }
  },
  created() {
    this.getBreadcrumb();
  },
  methods: {
    getBreadcrumb() {
      let matched = this.$route.matched.filter(item => item.name);
      let route = this.$route.matched.pop();
      console.log(route.parent.name);
      // const first = matched[0];
      //处理如果是一级的时候不显示面包导航
      // console.log(matched.length)
      if (matched.length === 2) {
        this.levelList = [];
        return false;
      }

      // if (first && first.name.trim().toLocaleLowerCase() !== 'agent'.toLocaleLowerCase()) {
      //   matched = [{ path: '/agent', meta: { title: 'agent' }}].concat(matched)
      // }
      this.levelList = matched;
    }
  }
};
</script>
